<template>
  <div>
    <div v-show="show">
      <ChildTestShowTip ref="ChildTestShowTipRef" :more-then-length-w-ord="moreThenLengthWOrd" :result="result" :test-width="testWidth"/>
    </div>
    <div class="clickCopyTest">
      <div
        v-click-copy="'点击文本复制' + item"
        v-for="(item) in 6"
      >
        点击文本复制{{item}}
      </div>
    </div>
    <el-button @click="show=true">
      显示
    </el-button>
    <el-button @click="testWidth++">
      宽度增加
    </el-button>
    <el-button @click="addListen">
      添加监听
    </el-button>
    <el-button @click="removeListen">
      移除监听
    </el-button>
  </div>
</template>

<script>
import htmlElementUtils from "@localModules/ZhiXinLib/utils/htmlElementUtils";
import {ElSizeListen} from "@localModules/ZhiXinLib/utils/ElSizeListen";
import ChildTestShowTip from "@/views/textEllipsis/ChildTestShowTip";
import {ClickCopy} from "@localModules/ZhiXinLib/directive/ClickCopy/index";

export default {
  name: "TextEllipsis",
  components: {ChildTestShowTip},
  directives:{
    ClickCopy
  },
  data(){
    return {
      show:false,
      testWidth: 50,
      result:false,
      moreThenLengthWOrd: `sg54as56dg46a5s4g56sa4a5sd4g56sa4d65g45sa4dg564as65ds4g5as4g54as5dg45as4d5g5asd4g5as5dg5as45dg456as4d5g489w48g94a651g2xc3123g1562c1b23c1f5sf4v1b2cf564h5df2b15s4d65g456s4fg564sf1b23c15x4gf56sd32f1gsdf451b2sd564fg56sdfh4sd5f1b2s1d54h56f4s5h46s2b31s2d4f56h45g456as4g56d4as564dg56as456gd45as4dg545d6g456as465gasdg45as4dg564as56dg465as4d56g465as4dg564as5d4as564g654as5dg456as4d5g64as65d4g564as5g45s4a5dg`
    }
  },
  mounted() {
    this.result = htmlElementUtils.eleHasEllipsis(this.$refs.ChildTestShowTipRef.$refs.testRef);
    console.log(this.result);
  },
  methods:{
    addListen(){
      ElSizeListen.addListen(this.$refs.ChildTestShowTipRef.$refs.testRef,(el,oldHeight,oldWidth)=>{
        console.log(el,oldHeight,oldWidth)
      })
    },
    removeListen(){
      ElSizeListen.removeListen(this.$refs.ChildTestShowTipRef.$refs.testRef,(el, oldHeight, oldWidth)=>{
        console.log(el,oldHeight,oldWidth)
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.clickCopyTest{
  margin-top: 16px;
  margin-bottom: 16px;
}
</style>
